<template>
  <section class="component chart-query-form row"> 
    <el-select v-model="queryModel.rankingType" @change="qureyDataChange" size="mini">
      <el-option v-for="item of paybackType" :key="item.value" :label="item.name" :value="item.value"></el-option>
    </el-select>
    <el-select v-model="queryModel.productName" placeholder="请选择" clearable @change="pullDown">
      <el-option v-for="{id,productName} in this.pullDownData" :key="id" :label="productName" :value="id"></el-option>
    </el-select> 
    <el-select v-model="queryModel.overduePeriod" placeholder="请选择" clearable @change="qureyDataChange">
      <el-option v-for="{name,code} in $dict.getDictData('OverduePeriodStatus')" :key="code" :label="name" :value="code.replace(/M|\+/, '')"></el-option>
    </el-select>
    <chart-date-select v-model="queryModel.dateDimension" v-if="!hiddenDateType" @on-datetype-change="qureyDataChange"></chart-date-select>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import { Component, Watch, Prop, Emit, Model } from "vue-property-decorator";
import { PaybackType, QueryDateType } from './dashboard.config';
import ChartDateSelect from "./chart-date-select.vue";
import { ProductService } from '~/services/domain-service/product.service';
import { Layout, Dependencies } from "~/core/decorator";

@Component({
  components: {
    ChartDateSelect
  }
})
export default class ChartQueryForm extends Vue {
  @Dependencies(ProductService) private productService: ProductService

  private paybackType: any[] = PaybackType;
  private queryDateType: any[] = QueryDateType;
  private pullDownData:any = []

  @Prop({
    default: false
  })
  private hiddenDateType: boolean;

  @Model("update-query") 
  private queryModel;

  @Emit("update-query")
  private emitQueryModel(value: any) { }



  /**
   * 下拉
   */ 
  private pullDown(){
    this.productService.selectProductList().subscribe(
      data => {
        this.pullDownData = data
        this.qureyDataChange()
      }
    )
  }



  private qureyDataChange() {
    console.log(this.queryModel,'我看看他点了什么')
    this.emitQueryModel({ ...this.queryModel })
  }

  private mounted(){
    this.pullDown()

  }

   

}
</script>

<style lang="less">
.component.chart-query-form.row {
  .el-select{
    width: 120px;
  }
}
</style>
